import { nodeListInterface } from "@/components/editGraph/addNode.vue"
import { Graph, Node } from "@antv/x6"

// 基础节点信息
const ports = {
    groups: {
        top: {
            position: 'top',
            attrs: {
                circle: {
                    r: 4,
                    magnet: true,
                    stroke: '#5F95FF',
                    strokeWidth: 1,
                    fill: '#fff',
                    style: {
                        visibility: 'hidden',
                    },
                },
            },
        },
        right: {
            position: 'right',
            attrs: {
                circle: {
                    r: 4,
                    magnet: true,
                    stroke: '#5F95FF',
                    strokeWidth: 1,
                    fill: '#fff',
                    style: {
                        visibility: 'hidden',
                    },
                },
            },
        },
        bottom: {
            position: 'bottom',
            attrs: {
                circle: {
                    r: 4,
                    magnet: true,
                    stroke: '#5F95FF',
                    strokeWidth: 1,
                    fill: '#fff',
                    style: {
                        visibility: 'hidden',
                    },
                },
            },
        },
        left: {
            position: 'left',
            attrs: {
                circle: {
                    r: 4,
                    magnet: true,
                    stroke: '#5F95FF',
                    strokeWidth: 1,
                    fill: '#fff',
                    style: {
                        visibility: 'hidden',
                    },
                },
            },
        },
    },
    items: [
        {
            group: 'top',
        },
        {
            group: 'right',
        },
        {
            group: 'bottom',
        },
        {
            group: 'left',
        },
    ],
}
const tools = [
    {
        name: 'node-editor',
        args: {
            attrs: {
                backgroundColor: '#EFF4FF',
            },
        },
    },
]
/**
 * @description 注册编辑节点
 */
const initRegisterNode = () => {
    Graph.registerNode(
        'custom-rect',
        {
            inherit: 'rect',
            width: 66,
            height: 36,
            attrs: {
                body: {
                    strokeWidth: 1,
                    stroke: '#5F95FF',
                    fill: '#EFF4FF',
                },
                text: {
                    fontSize: 12,
                    fill: '#262626',
                },
            },
            tools: tools,
            ports: { ...ports },
        },
        true,
    )

    Graph.registerNode(
        'custom-polygon',
        {
            inherit: 'polygon',
            width: 66,
            height: 36,
            attrs: {
                body: {
                    strokeWidth: 1,
                    stroke: '#5F95FF',
                    fill: '#EFF4FF',
                },
                text: {
                    fontSize: 12,
                    fill: '#262626',
                },
            },
            ports: {
                ...ports,
                items: [
                    {
                        group: 'top',
                    },
                    {
                        group: 'bottom',
                    },
                ],
            },
            tools: tools,
        },
        true,
    )

    Graph.registerNode(
        'custom-circle',
        {
            inherit: 'circle',
            width: 45,
            height: 45,
            attrs: {
                body: {
                    strokeWidth: 1,
                    stroke: '#5F95FF',
                    fill: '#EFF4FF',
                },
                text: {
                    fontSize: 12,
                    fill: '#262626',
                },
            },
            ports: { ...ports },
            tools: tools,
        },
        true,
    )

    Graph.registerNode(
        'custom-image',
        {
            inherit: 'rect',
            width: 52,
            height: 52,
            markup: [
                {
                    tagName: 'rect',
                    selector: 'body',
                },
                {
                    tagName: 'image',
                },
                {
                    tagName: 'text',
                    selector: 'label',
                },
            ],
            attrs: {
                body: {
                    stroke: '#5F95FF',
                    fill: '#5F95FF',
                },
                image: {
                    width: 26,
                    height: 26,
                    refX: 13,
                    refY: 16,
                },
                label: {
                    refX: 3,
                    refY: 2,
                    textAnchor: 'left',
                    textVerticalAnchor: 'top',
                    fontSize: 12,
                    fill: '#fff',
                },
            },
            ports: { ...ports },
            tools: tools,
        },
        true,
    )
}

/**
 * @description 注册节点连线
 */
const initOnLine = (graph: Graph) => {
    const showPorts = (ports: NodeListOf<SVGElement>, show: boolean) => {
        for (let i = 0, len = ports.length; i < len; i += 1) {
            ports[i].style.visibility = show ? 'visible' : 'hidden'
        }
    }
    graph.on('node:mouseenter', () => {
        const container = document.getElementById('graph-container')!
        const ports = container.querySelectorAll(
            '.x6-port-body',
        ) as NodeListOf<SVGElement>
        showPorts(ports, true)
    })
    graph.on('node:mouseleave', () => {
        const container = document.getElementById('graph-container')!
        const ports = container.querySelectorAll(
            '.x6-port-body',
        ) as NodeListOf<SVGElement>
        showPorts(ports, false)
    })
}

/**
 * @description 注册页面快捷键
 */
const initKeyWord = () => { }

/**
 * @description graph高亮显示
 */
const cellHighlightShow = (graph: Graph) => {
    // graph.on('edge:mouseenter', ({ cell }) => {
    //     const cellData = cell.getData();
    //     const cellId = cellData?.source?.cell;
    //     const sourceCell = cellId ? graph.getCellById(cellId) : null;
    //     cell.attr('line', { stroke: '#cf1322', strokeWidth: 4, strokeDasharray: '0' });
    //     cell.zIndex = 100000000;
    //     if (sourceCell && sourceCell.getData()?.shape === 'CSA') {
    //         return false;
    //     }
    //     if (sourceCell && sourceCell.getData()?.shape === 'script') {
    //         console.log(sourceCell);

    //         const portID = cellData?.source?.port;
    //         const port = portID ? (sourceCell as Node).getPort(portID) : null;
    //         if (port && port.attrs && port.attrs.noDEL) {
    //             return false;
    //         }
    //     }
    //     const existingTools = Array.isArray(cell.getTools()) ? cell.getTools() : [];

    //     cell.addTools([
    //         ...existingTools as [],
    //         {
    //             name: 'button-remove',
    //             args: { distance: -40 },
    //         },
    //         {
    //             name: 'target-arrowhead',
    //             args: {
    //                 attrs: {
    //                     fill: '#1d39c4',
    //                 },
    //             },
    //         },
    //     ]);
    // });

    // graph.on('edge:mouseleave', ({ cell }) => {
    //     cell.removeTools();
    //     cell.attr('line', { stroke: '#7C8394', strokeWidth: 1, strokeDasharray: '4, 2' });
    //     cell.zIndex = 0;
    // });

    // // 节点高亮显示
    // graph.on('node:mouseenter', ({ cell }) => {
    //     const cellData = cell.getData();
    //     const cellId = cellData?.source?.cell;
    //     const sourceCell = cellId ? graph.getCellById(cellId) : null;
    //     cell.attr('label', { fill: '#2ECC71', });
    //     cell.zIndex = 100000000;
    //     if (sourceCell && sourceCell.getData()?.shape === 'CSA') {
    //         return false;
    //     }
    //     if (sourceCell && sourceCell.getData()?.shape === 'script') {
    //         const portID = cellData?.source?.port;
    //         const port = portID ? (sourceCell as Node).getPort(portID) : null;
    //         if (port && port.attrs && port.attrs.noDEL) {
    //             return false;
    //         }
    //     }
    //     const existingTools = Array.isArray(cell.getTools()) ? cell.getTools() : [];
    //     cell.addTools([
    //         ...existingTools as [],
    //         {
    //             name: 'button-remove',
    //             args: {
    //                 x: '100%',
    //                 y: 0,
    //                 offset: { x: -0, y: -0 },
    //             },
    //         },
    //     ]);
    // });

    // graph.on('node:mouseleave', ({ cell }) => {
    //     cell.removeTools();
    //     cell.attr('label', { fill: '#262626' });
    //     cell.zIndex = 0;
    // });
}


/**
 * @description 添加设备元素节点
 */
const addNodeDevice = (input: (string | number)[], out: (string | number)[], graph: Graph, node: nodeListInterface) => {
    const max = input.length > out.length ? input.length : out.length
    const height = max * 50
    const parent = {
        shape: 'rect',
        x: 100,
        y: 40,
        width: 170,
        height: height,
        zIndex: 1,
        label: node.name,
    }
    const child = {
        shape: 'rect',
        attrs: {
            body: {
                stroke: '#000000',
                strokeWidth: 1,
                fill: '#ffffff',
                magnet: true
            }
        },
        x: parent.x + 10,
        y: 0,
        width: 30,
        height: 30,
        zIndex: 10,
        label: "",
    }

    const nodeParent = graph.addNode(parent)
    input.forEach((_, index) => {
        child.label = 'i_' + (index + 1)
        child.y = parent.y + 10 + index * 10 + index * 25
        nodeParent.addChild(graph.addNode(child))
    })
    out.forEach((_, index) => {
        child.label = 'o_' + (index + 1)
        child.x = parent.x + parent.width - 40
        child.y = parent.y + 10 + index * 10 + index * 25
        nodeParent.addChild(graph.addNode(child))
    })
}

export { initRegisterNode, initOnLine, initKeyWord, cellHighlightShow, addNodeDevice }